<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios';
import ResultModal from './message.vue'

let studentUsername = ref('')
let studentPassword = ref('')
let studentPassword2 = ref('')
let name = ref('')
let sex = ref('')
let studentIdCode = ref('')
let nation = ref('')
const modal = ref(null);


let register = () => {
    if (studentPassword.value != studentPassword2.value) {
        console.log(studentPassword.value);
        console.log(studentPassword2.value);
        modal.value.show({
            code: 0,
            msg: '两次密码不一致'
        });
    } else {
        axios.post('http://localhost:8080/student/register', {
            studentUsername: studentUsername.value,
            studentPassword: studentPassword.value,
            studentName: name.value,
            studentSex: sex.value,
            studentIdCode: studentIdCode.value,
            studentNation: nation.value
        }).then(function (response) {
            modal.value.show(response.data);
            if (response.data.code == 1) {
                router.push('/')
            } else {
                modal.value.show(response.data);
            }
        })
    }

}

</script>

<template>
    <div class="f1">
        <div class="box">
            <div class="h">
                <h2>注册</h2>
            </div>
            <a href="student" class="back">
                < 返回</a>
                    <div class="reg-box">

                        <p>账户名</p>
                        <input name="studentUsername" id="studentUsername" v-model="studentUsername"
                            placeholder="请输入账户名" class="input">
                        <p>请输入密码</p>
                        <input type="password" name="studentPassword" id="studentPassword" v-model="studentPassword"
                            placeholder="请输入密码" class="input">
                        <p>请确认密码</p>
                        <input type="password" name="studentPassword2" id="studentPassword2" v-model="studentPassword2"
                            placeholder="请再次输入密码" class="input">
                        <p>姓名</p>
                        <input type="text" name="name" id="name" placeholder="请输入真实姓名" class="input" v-model="name">
                        <p>性别</p>
                        <input type="text" name="sex" v-model="sex" class="input" placeholder="请输入性别">
                        <p>身份证号</p>
                        <input type="text" name="studentIdCode" v-model="studentIdCode" class="input"
                            placeholder="请输入身份证号">
                        <p>民族</p>
                        <input type="text" name="nation" v-model="nation" class="input" placeholder="请输入民族"><br />
                        <button class="btn" @click="register">注册</button>

                    </div>
        </div>
    </div>
    <ResultModal ref="modal" />
</template>
<style scoped>
.f1 {
    display: flex;
    justify-self: center;
    align-items: center;
    height: 97vh;
}

.box {
    display: flex;
    background-color: #d9facf;
    width: 1000px;
    height: 700px;
    flex-direction: column;
    border-radius: 10px;
}

.h {
    height: 100px;
    width: 100%;
    background-color: #f7f5ae;
    border-radius: 10px 10px 0 0;
    display: flex;
}

.h h2 {
    display: block;
    margin: auto;
    color: #84ef63;
}

.back {
    display: block;
    margin-left: 20px;
    margin-top: 20px;
}

.reg-box {
    display: flex;
    flex-direction: column;
    align-content: space-around;
    margin-left: 45px;
    margin-top: 20px;
    margin: 0 auto;
}
.reg-box > *{
    display: block;
    margin-top: 5px;
}
.reg-box input{
    width: 300px;
    height: 30px;
    outline: none;
    border: none;
}
.btn{
    display: block;
    width: 200px;
    height: 25px;
    margin: 0 auto;
}
.reg-box p{
    margin: 5px 5px;
    color: #969696;
}
</style>